<template>
<!-- 生活需求 -->
    <div class="main">
        <div class="form-container">
            <div class="form-main">
                <div class="controls">
                    <label for="controls">生活物资</label><br/>
                    <div class="form-border tizheng clearfix">
                        <div>
                            <el-checkbox  v-model="life_needs" label="米"></el-checkbox>
                            <!-- <input type="checkbox" name="controls" value="0" v-model="life_needs"/> 米 -->
                        </div>
                        <div>
                            <el-checkbox  v-model="life_needs" label="面"></el-checkbox>
                            <!-- <input type="checkbox" name="controls" value="1" v-model="life_needs"/> 面 -->
                        </div>
                        <div>
                            <el-checkbox  v-model="life_needs" label="油"></el-checkbox>
                            <!-- <input type="checkbox" name="controls" value="2" v-model="life_needs"/> 油 -->
                        </div>
                        <div>
                            <el-checkbox  v-model="life_needs" label="盐"></el-checkbox>
                            <!-- <input type="checkbox" name="controls" value="3" v-model="life_needs"/> 盐 -->
                        </div>
                        <div>
                            <el-checkbox  v-model="life_needs" label="青菜"></el-checkbox>
                            <!-- <input type="checkbox" name="controls" value="4" v-model="life_needs"/> 青菜 -->
                        </div>
                        <div>
                            <el-checkbox  v-model="life_needs" label="肉"></el-checkbox>
                            <!-- <input type="checkbox" name="controls" value="5" v-model="life_needs"/> 肉 -->
                        </div>
                        <div>
                            <el-checkbox  v-model="life_needs" label="常规药品"></el-checkbox>
                            <!-- <input type="checkbox" name="controls" value="6" v-model="life_needs"/> 常规药品 -->
                        </div>
                        <div>
                            <el-checkbox  v-model="life_needs" label="口罩"></el-checkbox>
                            <!-- <input type="checkbox" name="controls" value="7" v-model="life_needs"/> 口罩 -->
                        </div>
                        <div>
                            <el-checkbox  v-model="life_needs" label="酒精"></el-checkbox>
                            <!-- <input type="checkbox" name="controls" value="8" v-model="life_needs"/> 酒精 -->
                        </div>
                        <div>
                            <el-checkbox  v-model="life_needs" label="消毒液"></el-checkbox>
                            <!-- <input type="checkbox" name="controls" value="9" v-model="life_needs"/> 消毒液 -->
                        </div>
                    </div>
                </div>
                <div class="other_life_needs">
                    <!-- <span class="required" style="color:red">*</span>  -->
                    <label for="other_life_needs">其他生活物资</label><br/>

                    <input class="form-border" id="other_life_needs" type="text" name="username"  placeholder="其他生活物资" required="required" v-model="other_life_needs" /> <br/>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { newquestionnaireData ,queryCityData} from '@/assets/js/service'
import { Confirm , Datetime,PopupPicker,Popup} from 'vux'

export default {
    components: {
        Confirm,
        Datetime,
        PopupPicker,
        Popup
    },
    data () {
        return {
            life_needs:[],//生活物资
            other_life_needs:'',//其他生活物资
        }
    },
    created () {
    },
    mounted: function () {
       let epidemicData = JSON.parse(localStorage.getItem('epidemicData'));
        if(epidemicData) {
            this.life_needs = epidemicData.lifeNeeds.split(',')
            this.other_life_needs = epidemicData.otherLifeNeeds
        } 
    },
    watch:{

    },
    methods: {

    }
}
</script>
<style lang="less" scoped>

.main{
    overflow: hidden;
    // background: url("../../assets/images/home/bj.png") 0 0;
    background-size: 100% 100%;
    .form-container{
        background: #f8fafb;
        background-size: 100% 100%;
        width: calc(100% -16px);
        border-radius: 8px;
        padding-top: 15px;
        border: solid 1px #e5e5e5;
        // margin: 0 3%;
        margin-left:8px;
        margin-right:8px;
        // margin-bottom: 10px;
        padding-bottom: 25px;
        .form-main{
            width: 100%;
            padding: 0 20px;
            color: #333;
            border-radius: 8px;
            background-color: #f5f8fa;
            h4{
                margin-top: 15px;
            }
            .form-border{
                background-color: rgba(255, 255, 255, 0.9);
                color: #333333;
                padding:5px;
                margin: 5px 0;
                width: 100%;
                margin-bottom: 20px;
                border-radius: 3px;
                box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.8);
            }
            .tizheng{
                div{
                    width: 50%;
                    float: left;
                    padding: 10px 5px;
                    font-size: 15px;
                    input{
                        vertical-align: middle;
                        width: 15px;
                        height: 15px;
                    }
                }
            }
            .form-twoBor{
                padding: 5px 0;
                div{
                    width: 100%;
                    padding: 10px 10px;
                    input{
                        vertical-align: middle;
                        width: 20px;
                        height: 20px;
                    }
                    label{
                        font-size: 15px;
                    }
                }

            }
            
        }
    }
.yy-input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    /* WebKit browsers */
    color: red;
  }
    
}
</style>